<template>
  <el-card>
    <div class="HCHeader">
      <el-form :model="HCHeaderForm" ref="HCHeaderForm" @submit.prevent>
        <span style="
            font-size: 20px;
            font-weight: 600;
            height: 7vh;
            line-height: 7vh;
            margin-left: 50px;
          ">健康体检信息管理</span>
        <el-row :gutter="28" style="width: 50vw; padding-top: 9px; height: 7vh; float: right">
          <el-col :span="8">
            <el-form-item style="float: right">
              <span style="font-size: 18px">&nbsp;</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="drugname">
              <el-input placeholder="输入居民姓名" @change="SelectResident" v-model="HCHeaderForm.hcname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="success" @click="SelectResident()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="HCContent">
      <el-table :data="items.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        " border id="eltable" height="61vh" :header-cell-style="{ 'text-align': 'center', 'font-size': '14px' }"
        :cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="bid" label="编号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="sex" label="性别">
          <template #default="props">
            {{ props.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="bmi" label="BMI">
          <template #default="scope">
            <el-tag :type="scope.row.bmi === 0
              ? 'primary'
              : scope.row.bmi === 1
                ? 'warning'
                : 'danger'
              ">{{
                scope.row.bmi === 0
                  ? "正常"
                  : scope.row.bmi === 1
                    ? "临界"
                    : "异常"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="liver" label="肝功能">
          <template #default="scope">
            <el-tag :type="scope.row.liver === 0
              ? 'primary'
              : scope.row.liver === 1
                ? 'warning'
                : 'danger'
              ">{{
                scope.row.liver === 0
                  ? "正常"
                  : scope.row.liver === 1
                    ? "临界"
                    : "异常"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="kidney" label="肾功能">
          <template #default="scope">
            <el-tag :type="scope.row.kidney === 0
              ? 'primary'
              : scope.row.kidney === 1
                ? 'warning'
                : 'danger'
              ">{{
                scope.row.kidney === 0
                  ? "正常"
                  : scope.row.kidney === 1
                    ? "临界"
                    : "异常"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bloodpressure" label="血压">
          <template #default="scope">
            <el-tag :type="scope.row.bloodpressure === 0
              ? 'primary'
              : scope.row.bloodpressure === 1
                ? 'warning'
                : 'danger'
              ">{{
                scope.row.bloodpressure === 0
                  ? "正常"
                  : scope.row.bloodpressure === 1
                    ? "临界"
                    : "异常"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bloodfat" label="血脂">
          <template #default="scope">
            <el-tag :type="scope.row.bloodfat === 0
              ? 'primary'
              : scope.row.bloodfat === 1
                ? 'warning'
                : 'danger'
              ">{{
                scope.row.bloodfat === 0
                  ? "正常"
                  : scope.row.bloodfat === 1
                    ? "临界"
                    : "异常"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bloodroutine" label="血常规">
          <template #default="scope">
            <el-tag :type="scope.row.bloodroutine === 0
              ? 'primary'
              : scope.row.bloodroutine === 1
                ? 'warning'
                : 'danger'
              ">{{
                scope.row.bloodroutine === 0
                  ? "正常"
                  : scope.row.bloodroutine === 1
                    ? "临界"
                    : "异常"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="urinalysis" label="尿常规">
          <template #default="scope">
            <el-tag :type="scope.row.urinalysis === 0
              ? 'primary'
              : scope.row.urinalysis === 1
                ? 'warning'
                : 'danger'
              ">{{
                scope.row.urinalysis === 0
                  ? "正常"
                  : scope.row.urinalysis === 1
                    ? "临界"
                    : "异常"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="体检时间" width="180" />
        <el-table-column prop="healthrecord" label="健康档案号" width="185" />
        <el-table-column label="操作">
          <template #default="props">
            <el-button size="small" @click="History(props.row.healthrecord)" link type="primary">历史</el-button>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <span style="color: #969799">未查询到体检信息</span>
        </template>
      </el-table>
      <div class="page">
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next"
          background :total="items.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <a-float-button shape="circle" type="primary" :style="{
      top: '145px',
      right: '17px',
    }" @click="handleClick()">
      <template #icon>
        <svg t="1710575865787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="8963" width="16" height="16">
          <path
            d="M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z"
            fill="#ffffff" p-id="8964"></path>
        </svg>
      </template>
    </a-float-button>
  </el-card>
</template>
<script>
import { pageMixin } from "@/mixins/pageMixin";
import { getList, getHistory, queryRecord } from "@/api/bodycheck";
export default {
  mixins: [pageMixin],
  data() {
    return {
      name: "healthrecord",
      HCHeaderForm: {
        hcname: null,
      },
      items: [],
      queryParams: {
        name: "",
        healthrecord: "",
      },
    };
  },
  created() {
    this.name = this.$route.query.param == undefined ? "" : this.$route.query.param; // "John"
    if (this.name != "") {
      this.History(this.name)
    }
    this.queryList();
  },
  methods: {
    queryList() {
      getList().then((res) => {
        this.items = res.data.data;
      });
    },
    History(healthrecord) {
      this.queryParams.healthrecord = healthrecord;
      getHistory(this.queryParams).then((res) => {
        this.items = res.data.data;
        this.queryParams.name = "";
        this.queryParams.healthrecord = ""
      });
    },
    handleClick() {
      // this.$router.push(`/health/check`);
      this.queryList();
    },
    SelectResident() {
      this.queryParams.name = this.HCHeaderForm.hcname;
      queryRecord(this.queryParams).then((res) => {
        this.items = res.data.data;
        this.HCHeaderForm.hcname = "";
        this.queryParams.name = "";
        this.queryParams.healthrecord = ""
      });
    },
  },
};
</script>
<style>
.HCHeader {
  width: 100%;
  height: 7vh;
  margin-bottom: 5px;
}

.HCContent {
  width: 100%;
  height: 67vh;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px;
  align-items: end;
  width: 100%;
  height: 40px;
  background-color: white;
}

.el-form-item__label {
  width: 125px !important;
}

#eltable {
  width: 100% !important;
}
</style>
